<template>
  <div class="order-tablelist">
    <el-tabs v-model="activeName">
      <el-tab-pane label="等待交割" name="first">
        <el-table v-if="token!=''" :data="continueTable" stripe style="width: 100%">
          <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>
          <el-table-column prop="scontractName" label="合约名称" min-width="100"></el-table-column>
          <el-table-column prop="directionName" label="方向" min-width="50"></el-table-column>
          <el-table-column prop="num" label="购买数量" min-width="100"></el-table-column>
          <el-table-column prop="openPrice" label="开盘价格" min-width="100"></el-table-column>
          <el-table-column prop="createTime" label="下单时间" min-width="150"></el-table-column>
          <el-table-column prop="settleTime" label="开盘时间" min-width="150"></el-table-column>
          <el-table-column prop="delaySeconds" label="秒合约倒计时" min-width="120">
            <template slot-scope="scope">
              {{scope.row.delaySeconds}}
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="login-to">
          <div>
            <span>登陆</span>
            <span>注册</span>
          </div>
          <p>登录/注册后进行交易</p>
        </div>
      </el-tab-pane>

      <el-tab-pane label="历史交割" name="second">
        <el-table v-if="token!=''" :data="stopTable" stripe style="width: 100%">
          <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>
          <el-table-column prop="scontractName" label="秒合约名称" min-width="100"></el-table-column>
          <el-table-column prop="directionName" label="方向" min-width="50"></el-table-column>
          <el-table-column prop="num" label="购买数量" min-width="100"></el-table-column>
          <el-table-column prop="profit" label="收益" min-width="100"></el-table-column>
          <el-table-column prop="openPrice" label="开盘价格" min-width="100"></el-table-column>
          <el-table-column prop="createTime" label="开盘时间" min-width="150"></el-table-column>
          <el-table-column prop="openPrice" label="下单价格" min-width="100"></el-table-column>
          <el-table-column prop="settlePrice" label="结算价格" min-width="100"></el-table-column>
          <el-table-column prop="settleTime" label="结算时间" min-width="150"></el-table-column>
        </el-table>
        <div v-else class="login-to">
          <div>
            <span>登陆</span>
            <span>注册</span>
          </div>
          <p>登录/注册后进行交易</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { repositoryList , repositoryHistory } from '../../api/api'
import { mapState } from 'vuex';
import qs from 'qs'
export default {
  name: "order-tablelist",
  data() {
    return {
      activeName: "first",
      continueTable: [],
      stopTable: [],
    };
  },
  computed:{
    ...mapState(['token'])
  },
  created(){
    this.underway();
    this.completed();
  },
  methods:{
    underway(){
      var params = {
        pageNum:1,
        pageSize:8,
        token:this.token 
      }
      repositoryList(qs.stringify(params)).then(res=>{
        this.continueTable = res.data.data
      })
    },
    completed(){
      var params = {
        pageNum:1,
        pageSize:8,
        token:this.token 
      }
      repositoryHistory(qs.stringify(params)).then(res=>{
        this.stopTable = res.data.data
      })
    },
    
  }
};
</script>

<style lang='less' scope>



// ----------------------
.order-tablelist {
  margin: 0 15px;
  .login-to {
    text-align: center;
    padding: 60px 0;
    font-size: 16px;
    color: #0a9187;
    background-color: #f7f8f8;
    > div {
      margin-bottom: 10px;
      span:first-child {
        border-right: 1px solid #0a9187;
        padding-right: 15px;
        margin-right: 10px;
      }
    }
  }
  // -----------------------
  .el-tabs {
  background-color: #fff;
}
.el-tabs__item.is-active {
  color: #0a9187;
}
.el-tabs__item:hover {
  color: #0a9187;
}
.el-tabs__active-bar {
  background-color: #0a9187;
}
.el-table {
  font-size: 12px;
}
.el-table td,
.el-table th {
  padding: 6px 0;
}
.el-table__empty-text {
  height: 220px;
  padding-top: 150px;
  font-size: 14px;
  background: url("../../assets/img/zanwushuju.png") no-repeat center center;
  background-size: 10%;
}
}
</style>
